<template>
	<view v-if="show">
		<view :class="show2 ? 'code2' : 'code'">
			<view class="code-box">
				<block v-for="(item, index) of 6" :key="index">
					<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
				</block>
			</view>
		</view>
		<view v-if="show2" style="font-size: 28upx;text-align: center;" :class="show2 ? 'box' : ''">
			<text @click="NavTo" class="forget">首次设置</text>
			<text style="padding: 0 10upx;">或</text>
			<text @click="NavTo" class="forget">忘记密码?</text>
			<text  style="padding: 0 10upx;">找回并完成支付</text>
		</view>
		<view :class="[show ? '' : 'active',show2 ? 'keyboard2' : 'keyboard', isIphoneX ? 'isIphone' : '']">
			<block v-for="(item, index) of 9" :key="index">
				<view class="keyboard-item" @tap="key(index + 1)">{{ index + 1 }}</view>
			</block>
			<view class="keyboard-item hide"></view>
			<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
			<view class="keyboard-item delte" @tap="del()">
				<text>删除</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'KeyNumber',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		show2: {
			type: Boolean,
			default: false
		},
		isIphoneX: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			password: '',
			trantision: false
		};
	},
	methods: {
		key(key) {
			// uni.vibrateShort();//震动
			if (this.password.length < 6) {
				this.password += key;
				if (this.password.length == 6) {
					setTimeout(()=>{
						this.$emit('key',this.password);
					},500)
				}
			}
		},
		NavTo(){
			this.$emit('NavTo');
		},
		clear() {
			this.password = '';
		},
		close() {
			this.password = '';
			this.trantision = false;
			this.$emit('close', false);
		},
		del() {
			// uni.vibrateShort();
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.forget{
	// margin-right: 16upx;
	color: $uni-color-primary;
}
.visible {
	opacity: 0;
	z-index: 2;
	visibility: hidden;
}
.box{
	width: 100%;
	height: 100upx;
	background: #fff;
	border-bottom: 1px solid #ebebeb;
	font-size: 24upx;
	text-align: center;
	line-height: 100upx;
}
.code {
	width: 100%;
	height: 120upx;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	text-align: center;
}
.code2 {
	padding-top: 50upx;
	width: 100%;
	height: 120upx;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	text-align: center;
}
.code-box {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 10upx;
	border: 1px solid $uni-color-primary;
	box-shadow: 0 0 5upx 2upx $uni-color-primary;
}
.code2 .code-box{
	// border: 1px solid #d0d0d0;
	// box-shadow: none;
}
.code-box-item {
	width: 15vw;
	height: 12vw;
	background: #fff;
	font-size: 36upx;
	line-height: 85upx;
	text-align: center;
}
.code-box-item:first-child{
	border-top-left-radius: 10upx;
	border-bottom-left-radius: 10upx;
}
.code-box-item:last-child{
	border-top-right-radius: 10upx;
	border-bottom-right-radius: 10upx;
}
.code-box-item:not(:last-child) {
	border-right: 1px solid #d0d0d0;
}
.keyboard {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #ebebeb;
	display: flex;
	justify-content: center;
	z-index: 2;
	flex-wrap: wrap;
	transition: all 0.2s ease-in 0.2s;
}
.keyboard2 {
	width: 100%;
	background: #ebebeb;
	display: flex;
	justify-content: center;
	z-index: 2;
	flex-wrap: wrap;
	transition: all 0.2s ease-in 0.2s;
}
.active {
	bottom: -400upx;
}
.keyboard-item {
	box-sizing: border-box;
	width: 250upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #fff;
	font-size: 40upx;
	color: #333;
	height: 99upx;
	border: 1upx solid #ebebeb;
	border-top: none;
	border-left: none;
}
.keyboard-item:active{
	background: #ebebeb;
}
.hide {
	opacity: 0;
}
.delte {
	background: none;
	box-shadow: none;
}
.isIphone {
	padding-bottom: 68upx !important;
}
</style>
